<template>
	<a-spin :spinning="loading">
		<a-card>
			<section slot="title">订单列表</section>
			<a-row :gutter="16">
				<!-- <a-col :span="5">
					<span class="label">商品名称：</span>
					<a-input :max-length="100" allow-clear v-model="orderId" placeholder="请输入Id" />
				</a-col> -->
				<a-col :span="5">
					<span class="label">订单ID：</span>
					<a-input :max-length="100" allow-clear v-model="search_data.id" placeholder="请输入" />
				</a-col>
				<a-col :span="5">
					<span class="label">订单号：</span>
					<a-input :max-length="100" allow-clear v-model="search_data.no" placeholder="请输入" />
				</a-col>
				<a-col :span="5">
					<span class="label">下单日期：</span>
					<a-range-picker @change="onChange" />
				</a-col>
				<a-col :span="5">
					<span class="label">订单类型：</span>
					<a-select v-model="search_data.type" class="w-full" allow-clear placeholder="请选择">
						<a-select-option :value="0">普通订单</a-select-option>
						<a-select-option :value="1">秒杀订单</a-select-option>
						<a-select-option :value="2">砍价订单</a-select-option>
						<a-select-option :value="3">拼团订单</a-select-option>
						<a-select-option :value="7">服务订单</a-select-option>
					</a-select>
				</a-col>
				<a-col :span="5">
					<span class="label">订单状态：</span>
					<a-select v-model="search_data.status" class="w-full" allow-clear placeholder="请选择">
						<a-select-option :value="0">待支付</a-select-option>
						<a-select-option :value="10">待发货</a-select-option>
						<a-select-option :value="20">已发货</a-select-option>
						<a-select-option :value="30">已完成</a-select-option>
						<a-select-option :value="40">已取消</a-select-option>
					</a-select>
				</a-col>
				<!-- <a-col :span="5">
					<span class="label">商品分类：</span>
					<a-select v-model="status" class="w-full" allow-clear placeholder="请选择">
						<a-select-option v-for="item in orderStatusEnums" :value="item.value"
							:key="item.value">测试数据</a-select-option>
					</a-select>
					<a-select v-model="status" class="w-full" allow-clear placeholder="请选择">
						<a-select-option v-for="item in orderStatusEnums" :value="item.value"
							:key="item.value">测试数据</a-select-option>
					</a-select>
				</a-col> -->
				<!-- <a-col :span="5">
					<span class="label">订单分类：</span>
					<a-select v-model="status" class="w-full" allow-clear placeholder="请选择">
						<a-select-option v-for="item in orderStatusEnums" :value="item.value"
							:key="item.value">测试数据</a-select-option>
					</a-select>
				</a-col>
 -->
				<a-col :span="8">
					<a-button class="ml-18" type="primary" @click="search">查询</a-button>
					<a-button class="mx-8" @click="reset">重置</a-button>
					<a-button type="primary" ghost class="ml-10 border-5" @click="exportTable">导出</a-button>
				</a-col>
			</a-row>
			<a-table class="mt-16 order-table" :columns="columns" :data-source="data" :scroll="scroll"
				:pagination="pagination">
				<template #status="status, data">
					{{ statusLists[data.status] }}
				</template>
        <template #type="type, data">
          {{ typeLists[data.type] }}
        </template>
        <template #payChannelCode="payChannelCode, data">
          {{ payChannelCodeLists[data.payChannelCode] }}
				</template>
        <template #userNickname="userNickname, data">
					{{data.user.nickname}}
				</template>
        <template #payPrice="payPrice, data">
          {{data.payPrice}}
        </template>
        <template #createTime='createTime, data'>
          {{ $utils.formatTimestamp(data.createTime) }}
        </template>
				<template #action="action, data">
					<div class="flex items-center justify-between">
						<a-button @click="goCharts(data)" type="primary">
							查看
						</a-button>
						<a-button type="primary" class="ml-10 mr-10" v-if="data.status==10&&data.type!=7" @click="send(data)">
							发货
						</a-button>
						<a-button class="ml-10 mr-10" type="danger" v-if="data.saleAfterId" @click='openSale(data)'>
							退款处理
						</a-button>
						<a-button @click="cancelOrder(data)" class="ml-10 mr-10" type="danger" v-if="data.status==0">
							取消订单
						</a-button>
						<a-button style="background-color: #FFD700;" v-if="data.type==7&&data.status==10" @click="he(data)">
							核销
						</a-button>
					</div>
				</template>
			</a-table>
			<!-- <a-divider  /> -->
		</a-card>

		<!-- 发货 -->
		<a-modal v-model:open="open" title="Basic Modal" @ok="handleOk">
			<div class="fahuo_box">
				<a-form :model="FormData">
					<a-form-item label="Username" name="username" :rules="[{ required: true, message: '请输入快递单号' }]">
						<a-input v-model:value="FormData.logisticsNo" />
					</a-form-item>
				</a-form>
			</div>
		</a-modal>
		<!-- end -->
		<particulars @upload="upload" ref="particulars"></particulars>
		<delivery  ref="delivery" @success="search"></delivery>
    <saleInfo ref="saleInfo" @success="search" @close='close'/>
	</a-spin>
</template>
<script>
import saleInfo from './components/saleInfo.vue'
	import particulars from './components/particulars.vue'
	import delivery from './components/delivery.vue'
	import {
		getOrderList,
    orderPick,
    orderCancel
	} from '@/api/newPet'
	import {
		tableMixins
	} from '@/utils/mixins'
	export default {
		mixins: [tableMixins],
		components: {
			particulars,
			delivery,saleInfo
		},
		data() {
			return {
				loading: false,
				tabs: 'select1',
				orderId: undefined,
				ceartTime: [undefined, undefined],
				status: null,
				statusLists: {0:'待付款',10:'待发货',20:'待收货',30:'已完成',40:'已取消'},
        typeLists: {0:'普通订单',1:'秒杀订单',2:'砍价订单',3:'拼团订单',7:'服务订单'},
        payChannelCodeLists: {'wx_lite':'微信支付'},
				orderStatusEnums: [{
						value: 0,
						name: '待付款'
					},
					{
						value: 10,
						name: '待发货'
					},
					{
						value: 20,
						name: '待收货'
					},
					{
						value: 30,
						name: '已完成'
					},
					{
						value: 40,
						name: '已取消'
					}
				],
				data: [],
				columns: [{
						title: '序号',
						dataIndex: 'id',
						align: 'center',
						width: 140,
						scopedSlots: {
							customRender: 'id'
						}
					},
					{
						title: '订单ID',
						dataIndex: 'id',
						align: 'center',
						width: 140,
						scopedSlots: {
							customRender: 'id'
						}
					},
					// {
					// 	title: '商品名称',
					// 	dataIndex: 'travellerName',
					// 	width: 120,
					// 	align: 'center',
					// 	scopedSlots: {
					// 		customRender: 'travellerName'
					// 	}
					// },

					// {
					// 	title: '图片',
					// 	dataIndex: 'status',
					// 	align: 'center',
					// 	width: 70,
					// 	scopedSlots: {
					// 		customRender: 'status'
					// 	}
					// },
					{
						title: '订单号',
						dataIndex: 'no',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'no'
						}
					},
					{
						title: '订单类型',
						dataIndex: 'type',
						align: 'center',
						width: 90,
						scopedSlots: {
							customRender: 'type'
						}
					},
					{
						title: '购买数量',
						dataIndex: 'productCount',
						align: 'center',
						width: 80,
						scopedSlots: {
							customRender: 'productCount'
						}
					},
					{
						title: '下单时间',
						dataIndex: 'createTime',
						align: 'center',
						width: 80,
						scopedSlots: {
							customRender: 'createTime'
						}
					},
					{
						title: '订单状态',
						dataIndex: 'status',
						align: 'center',
						width: 80,
						scopedSlots: {
							customRender: 'status'
						}
					},
					{
						title: '实付金额',
						dataIndex: 'payPrice',
						align: 'center',
						width: 80,
						scopedSlots: {
							customRender: 'payPrice'
						}
					},
					// {
					// 	title: '规格',
					// 	dataIndex: 'status',
					// 	align: 'center',
					// 	width: 80,
					// 	scopedSlots: {
					// 		customRender: 'status'
					// 	}
					// },
					{
						title: '支付方式',
						dataIndex: 'payChannelCode',
						align: 'center',
						width: 80,
						scopedSlots: {
							customRender: 'payChannelCode'
						}
					},
					{
						title: '下单用户',
						dataIndex: 'userNickname',
						align: 'center',
						width: 80,
						scopedSlots: {
							customRender: 'userNickname'
						}
					},
					{
						title: '下单手机号',
						dataIndex: 'userMobile',
						align: 'center',
						width: 100,
						scopedSlots: {
							customRender: 'userMobile'
						}
					},
					{
						title: '操作',
						fixed: 'right',
						dataIndex: 'action',
						width: 160,
						scopedSlots: {
							customRender: 'action'
						},
						align: 'center'
					}
				],
				FormData: {
					FormData: null
				},
				search_data: {

				},
				// pageNum:1,
				// pageSize:10
			}
		},
		computed: {},
		watch: {},
		async created() {
			this.pageNum = 1
			this.getData()
		},
		methods: {
      close(){
        this.search()
      },
			search() {
				this.pageNum = 1
				this.getData()
			},
			upload() {
				this.search()
			},
      chargeOff(){},
			delect(data) {
				this.$confirm({
					title: '删除',
					content: `是否确认取消订单？`,
					okText: '确定',
					okType: 'danger',
					cancelText: '取消',
					onOk: () => {

						this.loading = true
						deductionDetail({
								deductId: data.id
							})
							.then(res => {
								this.$message.success('删除成功！')

								this.search()

								this.loading = false
							})
							.finally(() => (this.loading = false))
					}
				})
			},
			goCharts(data) {
				this.$refs.particulars.open(data)
        this.$refs.particulars.getData(data)
			},
      openSale(data){
        this.$refs.saleInfo.open(data)
        this.$refs.saleInfo.getData(data)
      },
      he(data) {
        this.$confirm({
          title: '核销',
          content: `是否确认核销订单？`,
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            this.loading = true
            orderPick({
              pickUpVerifyCode: data.pickUpVerifyCode
            }).then(res => {
                this.$message.success('核销成功！')
                this.search()

                this.loading = false
              })
              .finally(() => (this.loading = false))
          }
        })
			},
      cancelOrder(data) {
        this.$confirm({
          title: '提示',
          content: `是否确认取消订单？`,
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            this.loading = true
            orderCancel({
              id: data.id
            }).then(res => {
                this.$message.success('取消成功！')
                this.search()

                this.loading = false
              })
              .finally(() => (this.loading = false))
          }
        })
			},
      send(data) {
				this.$refs.delivery.open(data)
			},

			getSearchParams() {
				// console.log(this.vendorId)
				return {
					pageNo: this.pageNum,
					pageSize: this.rowsNum,
					// startTime: this.$utils.getStartTime(this.ceartTime[0]),
					// endTime: this.$utils.getEndTime(this.ceartTime[1])
				}
			},
			getData() {
				console.log(this.pageNum,'pageNum',)
				this.loading = true
				getOrderList({
					pageNo: this.pageNum,
					pageSize: this.rowsNum,
          ...this.search_data
				})
					.then(data => {
						this.total = data.total
						this.data = data.list
					})
					.finally(() => (this.loading = false))
			},
			reset() {
				this.ceartTime = [undefined, undefined]
        this.search_data = {}
			}
		}
	}
</script>
<style lang="less" scoped>
	.ant-col {
		margin-bottom: 20px;
		display: flex;
		align-items: center;

		.label {
			flex-shrink: 0;
			width: 86px;
			text-align: right;
			font-size: 14px;
			color: #595959;
		}

		.w-full {
			flex: 1;
		}
	}
</style>